.login {
  text-align: center;
  height: 100vh;
  background: url('../../../assets/images/login-bg.jpg') no-repeat;
  padding-top: 15vh;
  .avatar {
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
    border-radius: 50%;
    border: 1rem solid hsla(0, 0%, 100%, 0.2);
    overflow: hidden;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .login-box {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 40px auto;
    input {
      transition: 0.2s;
      width: 100%;
      height: 52px;
      text-align: center;
      font-size: 1.1rem;
      color: hsla(0, 0%, 100%, 0.8);
      background: hsla(0, 0%, 100%, 0.4);
      border-radius: 52px;
      border: none;
      outline: none;
      box-sizing: border-box;
    }
    input:focus {
      box-shadow: 0 8px 18px 0 rgba(2, 92, 209, 0.57);
    }

    input::-webkit-input-placeholder {
      color: #fff;
    }

    input:-moz-placeholder {
      color: #fff;
    }

    input::-moz-placeholder {
      color: #fff;
    }

    input:-ms-input-placeholder {
      color: #fff;
    }

    .btn,
    .btn-up {
      width: 60%;
      transition: 0.2s;
      // margin: 0 auto;
      height: 3rem;
      border-radius: 3rem;
      line-height: 3rem;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center;
      background-color: #fff;
      color: rgba(75, 162, 243, 0.8);
      cursor: pointer;
    }
    .btn-up {
      width: 30%;
      background-color: rgba(46, 104, 157, 0.8);
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }

    .btn:hover,
    .btn-up:hover {
      color: white;
      transform: scale(1.1);
      background-color: #76aed3;
    }
  }
}
